<template>
  <div class="brand-detail">
    <el-dialog
      title=""
      :visible.sync="visible"
      width="65%"
      @close="handleClose"
    >
      <el-form
        ref="brandFormRef"
        :model="form"
        :rules="rules"
        label-width="150px"
        :inline="false"
        size="normal"
      >
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="品牌名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="首字母" prop="firstLetter">
              <el-input v-model="form.firstLetter" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="排序" prop="sort">
              <el-input v-model="form.sort" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="产品数量" prop="productCount">
              <el-input v-model="form.productCount" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="是否展示" prop="showStatus">
              <el-switch
                v-model="form.showStatus"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0" prop="factoryStatus">
            <el-form-item label="是否为品牌制造商">
              <el-switch
                v-model="form.factoryStatus"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="上传专区大图">
              <el-upload
                class="uploader"
                action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
                :headers="token"
                :show-file-list="false"
                :on-success="uploadBigPicSuccess"
              >
                <img v-if="form.bigPic" :src="form.bigPic" class="pic">
                <i v-else class="el-icon-plus uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="上传Logo">
              <el-upload
                class="uploader"
                action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
                :headers="token"
                :show-file-list="false"
                :on-success="uploadLogoSuccess"
              >
                <img v-if="form.logo" :src="form.logo" class="pic">
                <i v-else class="el-icon-plus uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { addBrand, updateBrand } from '@/api/product/brand/index'
export default {
  data() {
    return {
      visible: false,
      form: {
        name: '',
        firstLetter: '',
        sort: '',
        productCount: '',
        factoryStatus: 0,
        showStatus: 0,
        bigPic: '',
        logo: ''
      },
      rules: {
        name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
        firstLetter: [
          { required: true, message: '请输入首字母', trigger: 'blur' }
        ],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        productCount: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    token() {
      return { token: getToken() }
    }
  },
  methods: {
    open(brand) {
      if (brand) {
        this.form = brand
      }
      this.visible = true
    },
    // 确定
    handleConfirm() {
      this.$refs.brandFormRef.validate(async(valid) => {
        if (valid) {
          let ajaxApi = addBrand
          if (this.form.id) {
            ajaxApi = updateBrand
          }
          const { success, message } = await ajaxApi(this.form)
          if (success) {
            this.$message.success('保存成功')
            this.visible = false
          } else {
            this.$message.error(message)
          }
        }
      })
    },
    // 关闭
    handleClose() {
      console.log('dialog close')
      this.$refs.brandFormRef.resetFields()
    },
    // 上传专区大图
    uploadBigPicSuccess(res) {
      if (res.success) {
        this.form.bigPic = res.data.fileUrl
      }
    },
    // 上传logo
    uploadLogoSuccess(res) {
      if (res.success) {
        this.form.logo = res.data.fileUrl
      }
    }
  }
}
</script>
<style lang="scss" scope>
.brand-detail {
  .uploader .el-upload {
    cursor: pointer;
    position: relative;
  }
  .pic,
  .uploader-icon {
    width: 148px;
    height: 148px;
    display: flex;
    font-size: 24px;
    justify-content: center;
    align-items: center;
    border: 1px dashed #c0ccda;
  }
}
</style>
